<template>
  <div>
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="content-row">
      <div class="content-row-center">
        <div class="list-content-row">
          <div class="list-content-row-left content-row-center-left">
            <h2 class="content-title">{{ infoData.title }}</h2>
            <div class="content-title-attribute">
              <span class="attribute-date">{{ infoData.nowAddTime }}</span>
              <span>类型：{{ infoData.newsTypeName }}</span>
            </div>
            <div class="lpzx-content ql-editor" style="float: initial;" v-html="infoData.content"></div>
            <div class="paging-row">
              <a :href="`${prefixUrl}/qglpzxxq/${prevNum}.html`" class="paging-a">上一篇</a>
              <a :href="`${prefixUrl}/qglpzxxq/${nextNum}.html`" class="paging-a">下一篇</a>
            </div>
          </div>
          <div class="content-row-center-right">
            <div class="form-row-title">免费专车看房</div>
            <div class="form-row">
              <div class="form-inline">
                <label class="form-label">您的称呼</label>
                <div class="form-item">
                  <el-radio v-model="sexRadio" label="女士">女士</el-radio>
                  <el-radio v-model="sexRadio" label="先生">先生</el-radio>
                </div>
              </div>
              <div class="form-inline">
                <label class="form-label">预约看房时间</label>
                <div class="form-item">
                  <el-date-picker
                    v-model="houseViewingDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    placeholder="选择日期"
                    :editable="false"
                    style="width: 100%;"
                  ></el-date-picker>
                </div>
              </div>
              <div class="form-inline">
                <label class="form-label">您的联系方式</label>
                <div class="form-item">
                  <el-input
                    type="text"
                    placeholder="请输入您的手机号"
                    v-model="phone"
                    maxlength="11"
                    show-word-limit
                  ></el-input>
                </div>
              </div>
              <div class="form-inline" v-if="smsState">
                <label class="form-label">验证码</label>
                <div class="form-item">
                  <el-input
                    type="text"
                    placeholder="请输入验证码"
                    v-model="code"
                    maxlength="6"
                  ></el-input>
                  <el-button class="code-btn" @click="subCode" :disabled="codeDisabled">{{ codeText }}</el-button>
                </div>
              </div>
              <div class="form-inline" style="margin-bottom: 0">
                <div class="form-item">
                  <el-button type="danger" :disabled="subscribeDisabled" @click="subscribe" style="width: 100%;">预约免费专车看房</el-button>
                </div>
              </div>
            </div>
            <div style="height: 20px;"></div>
            <div class="list-content-row-right-list">
              <div class="right-list-title">推荐资讯</div>
              <ul>
                <li v-for="(item, index) in listDataTj" :key="index">
                  <a class="item-new" target="_black" :href="`${prefixUrl}/lpzxxq/${item.id}.html`">
                    <span :class="`${index<3?'ph':''}`">{{index+1}}</span>
                    <p class="text">{{item.title}}</p>
                  </a>
                </li>
              </ul>
            </div>
            <div class="form-row-title" style="margin-top: 20px;">热门推荐标签</div>
            <div class="list-content-row-right-list tga-row">
              <ul>
                <li v-for="(item, index) in houseNewsTags" :key="index">
                  <a :href="item.linkUrl" target="_blank">{{item.tagName}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="lpzx-footer">
          <div class="affirms">
            <strong>✖✖✖✖✖✖✖✖✖✖免责声明：</strong>本站资讯信息部分来源于网络，旨在为广大用户提供更多的楼市资讯信息，如信息，图片涉及侵权，请及时联系删除，谢谢
          </div>
          <div style="height: 50px"></div>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 分享二维码 -->
    <canvas id="canvas" v-show="false"></canvas>
    <!-- 订阅成功 -->
    <el-dialog
      width="280px"
      custom-class="Subscription-notification"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="SubscriptionSuess"
    >
      <div class="Subscription_Suess">
        <h3>{{ popupTitle }}</h3>
        <p>{{ popupDesc }}</p>
        <div class="Subscription_phone">
          <el-button class="Subscription_Dingyue_submit" @click="SubscriptionSuess = false">知道了</el-button>
        </div>
      </div>
      <div slot="footer" class="Subscription_Dingyue_fooetr">
        <p>Tips：稍后将电话联系您，请保持手机通畅。为保障您的服务体验，通话过程将会有录音</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import u from '@/plugins/Ccom'
var head = {
  title: '', // 网页包头
  content: '✖✖✖✖✖✖✖✖✖✖_专为买房人服务', // 网页描述
  keywords: '✖✖✖✖✖✖✖✖✖✖_专为买房人服务', // 网页关键词
}
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [{ rel: 'stylesheet', href: '/css/lpzx.css' }],
    }
  },
  validate({ params }) {
    // 判断接受id参数
    return /^\d+\.html$/.test(params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var cityCode = ctx.currentCity.cityCode
    var smsState = ctx.smsState
    var crumbListData = []
    var id = ctx.params.id ? ctx.params.id.split('.')[0] : ''
    var infoData = []
    var listDataTj = []
    var qrcodetext = `https://m.mfgjw.com/${currentCity.aliases}/qglpzxxq/${id}.html`
    var prevNum = 1
    var nextNum = 3
    var houseNewsTags = []
    // 获取详情数据
    let getInfoData = await u.http({
      url: '/pc/new/queryHouseNewById',
      params: {
        id,
      },
    })
    if (getInfoData.code == 200) {
      prevNum = getInfoData.data.prveId
      nextNum = getInfoData.data.nextId
      houseNewsTags = getInfoData.data.houseNewsTags || []
      getInfoData.data = getInfoData.data.houseNews
      getInfoData.data.content.replace(new RegExp(/<img /, 'gi'), '<br/><img ')
      getInfoData.data.nowAddTime = u.formatTime(
        getInfoData.data.createdTime,
        'Y-m-d H:i:s'
      )
      infoData = getInfoData.data
      // 1热点2购房指导3楼市周刊4看房日记5人气排行6热搜头条7独家专题8小编精选9轮播图10今日更新
      switch (infoData.type) {
        case 1: infoData.newsTypeName = '热点'; break
        case 2: infoData.newsTypeName = '购房指导'; break
        case 3: infoData.newsTypeName = '楼市周刊'; break
        case 4: infoData.newsTypeName = '看房日记'; break
        case 5: infoData.newsTypeName = '人气排行'; break
        case 6: infoData.newsTypeName = '热搜头条'; break
        case 7: infoData.newsTypeName = '独家专题'; break
        case 8: infoData.newsTypeName = '小编精选'; break
        case 9: infoData.newsTypeName = '轮播图'; break
        case 10: infoData.newsTypeName = '今日更新'; break
      }
      // 修改页面SEO
      head.title = `${infoData.title}-${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.keywords = `${infoData.newsTypeName}-${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.content = `${infoData.subtitle}-${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
    }
    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: infoData.title ? infoData.title.length > 8 ? `${infoData.title.substr(0, 8)}...` : infoData.title : '楼盘资讯详情',
        href: prefixUrl + ctx.route.path,
      },
    ]
    // 推荐资讯
    let getListDataTj = await u.http({
      url: '/app/new/queryNewList',
      params: {
        pageNum: 1,
        pageSize: 10,
        newsType: '',
        cityCode
      },
    })
    if (getListDataTj.code == 200) {
      listDataTj = getListDataTj.data.list
    }

    return {
      prefixUrl,
      currentCity,
      cityList,
      smsState,
      crumbListData,
      infoData,
      listDataTj,
      qrcodetext,
      prevNum,
      nextNum,
      houseNewsTags
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      sexRadio: '女士',
      houseViewingDate: '',
      subscribeDisabled: false,
      SubscriptionSuess: false,
      phone: '',
      code: '',
      codeText: '获取验证码',
      codeDisabled: false,
      loadTime: 60,
      popupTitle: '提交成功',
      popupDesc:
        '您已成功预约，稍后楼盘管家将联系您了解需求，为您定制专属置业报告。',
    }
  },
  methods: {
    // 触发验证码按钮
    subCode() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      var t = this.loadTime
      this.codeDisabled = true
      this.codeText = `${t}s重新获取`
      var clearLoadTime = setInterval((e) => {
        t--
        this.codeText = `${t}s重新获取`
        if (t < 1) {
          clearInterval(clearLoadTime)
          t = this.loadTime
          this.codeText = '重新获取'
          this.codeDisabled = false
        }
      }, 1000)
      this.getCode()
    },
    // 获取验证码
    getCode() {
      u.http({
        client: true,
        url: '/app/sms/loginCode',
        params: {
          phone: this.phone,
          countryCode: '86',
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          return
        }
      })
    },
    // 预约免费专车看房
    subscribe() {
      if (this.houseViewingDate == '') {
        this.$message({
          message: '请选择看房时间',
          type: 'warning',
        })
        return false
      }
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      if (this.smsState) {
        if (this.code == '') {
          this.$message({
            message: '请输入验证码',
            type: 'warning',
          })
          return false
        }
        this.validateCode()
        return false
      }
      this.subscribeCar()
    },
    // 验证手机号
    validateCode() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/user/login',
        params: {
          type: 2,
          phone: this.phone,
          code: this.code,
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
          return false
        }
        this.subscribeCar()
      })
    },
    // 预约专车
    subscribeCar() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/visitRecord/addVisitRecordByNoToken',
        params: {
          clickType: 9,
          phone: this.phone,
          amentTime: this.houseViewingDate,
          houseName: this.houseName,
          estateId: this.estateId,
          // amentCall: this.sexRadio,
          // amentHouseName: this.amentHouseName,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.SubscriptionSuess = true
          setTimeout((e) => {
            this.subscribeDisabled = false
          }, 1000)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
        }
      })
    },
  },
}
</script>